<template>
<div style="padding:10px;background-color: white;">
    <Search @submit="handleSearch" @reset="handleReset">
        <AFormItem label="登录人名称">
            <AInput v-model:value="state.formData.loginName"></AInput>
        </AFormItem>
        <AFormItem label="登录人手机">
            <AInput v-model:value="state.formData.mobile"></AInput>
        </AFormItem>
    </Search>
</div>
<div style="padding:10px;margin-top:10px;background-color: white;">
    <ATable :data-source="state.dataSource" :columns="columns" bordered :pagination="false">
        <template #bodyCell="{ record, column }">
            <template v-if="column.dataIndex === 'loginType'">
                <span v-if="record.loginType===1">微信客户登录</span>
                <span v-if="record.loginType===2">后台用户登录</span>
                <span v-if="record.loginType===3">后台用户退出</span>
            </template>
        </template>
    </ATable>
    <Pagination :pagination="state.pagination" @change="pageChange"></Pagination>
</div>
</template>
<script lang="ts" setup>
import {reactive} from "vue";
import Search from '@/components/Search/Search.vue';
import Pagination from '@/components/Pagination/index.vue';
import {loginService } from '@/service';
const state = reactive({
    formData:{
        loginName:"",
        mobile:""
    },
    pagination: {
    pageNum: 1,
    pageSize: 10,
    total: 0,
  },
    dataSource:[]
})

const columns = [
    {title:"登录人",dataIndex:"loginName"},
    {title:"类型",dataIndex:"loginType"},
    {title:"手机",dataIndex:"mobile"},
    {title:"登陆时间",dataIndex:"createTime"}
]

const handleSearch = async()=>{
    let res = await loginService.loginRecords({...state.formData,...state.pagination});
    if(res.code===0){
        state.dataSource = res.data?.list;
        state.pagination.total = res.data?.total
        console.log("state.dataSource",state.dataSource);
    }
}

const handleReset = ()=>{
    state.formData.loginName = "";
}

const pageChange = (page: number, size: number) => {
  state.pagination.pageNum = page;
  state.pagination.pageSize = size;
  handleSearch();
};

</script>